$(() => {
  // 购物车页面
  // 获取cookie中的用户名，判断是否登录
  var username = getCookie('username');
  if (!username) {
    sessionStorage.setItem('url', location.href);
    layer.msg('请先登录', { time: 1000 }, () => { location.href = './login.html' });
    return false;
  } else {
    // 获取到本地购物车的数据
    let cars = JSON.parse(localStorage.getItem('data'));
    // 判断本地购物车是否有数据
    if (!cars || !cars.length) {
      $('.cart>.content').html(`
      <div style="padding-left:10px;  width:600px; height:300px; border-radius:10px; border:5px solid black;" class="jumbotron">
        <h3>购物车空空如也~</h3>
        <p>赶快去挑选商品吧</p>
        <p><a class="btn btn-primary btn-lg" href="list.html" role="button">去购物</a></p>
      </div>            
      `)
    } else {
      // 根据用户名获取到购物车中对应的商品id
      let ids1 = cars.map(v => {
        if (v.username === username) return v.id;
      });
      // 通过数组的过滤方法去除数组中的undefined
      let ids2 = ids1.filter(v => v !== undefined)
      if (ids2.length == 0) {  // 空数组说明该用户没有本地的购物车数据
        $('.cart>.content').html(`
          <div style="padding-left:10px; width:600px; height:300px; border-radius:10px; border:5px solid black;" class="jumbotron">
            <h3>购物车空空如也~</h3>
            <p>赶快去列表页挑选商品吧</p>
            <p><a class="btn btn-primary btn-lg" href="list.html" role="button">去购物</a></p>
          </div>            
        `)
      } else {
        // 根据ids2数组中的商品id 组成一个 商品id的字符串
        let ids = ids2.join();
        // 根据这个id字符串请求接收
        async function fn() {
          let res = await pAjax({
            url: '../server/cart.php',
            data: { ids },
            dataType: 'json',
          })
          // 结构赋值获取数据
          let { data } = res;
          let strHtml = `
            <table class="table">
              <thead>
                  <tr>
                      <th><input type="checkbox" name="selectAll"></th>
                      <th>商品图片</th>
                      <th>商品名称</th>
                      <th>商品价格</th>
                      <th>商品数量</th>
                      <th>小计</th>
                      <th>操作</th>
                  </tr>
              </thead>
            <tbody>`;
          // 遍历data，并渲染页面
          // console.log(ids2);
          data.forEach(v => {
            // 通过cars调用find方法找到id为 v.id并且v.username为username的
            let num = cars.find(t => t.username === username && t.id === v.id).n;
            strHtml += `
              <!-- 将库存和产品id存储到属性中 -->
              <tr valign="bottom" data-id='${v.id}' data-stock='${v.stock}'>
                <td><input type="checkbox" name="selectOne"></td>
                <td><img src="${v.imgpath.split('==========')[0]}" width="50" height="50"></td>
                <td>${v.name}</td>
                <td class="price">￥<span>${v.price}</span></td>                    
                <td class="number">
                    <button class="btn btn-default reduce">-</button>
                    <input type="text" name="number" value="${num}">
                    <button class="btn btn-default add">+</button>
                </td>
                <td class="subtotal">￥<span>${num * v.price}</span></td>
                <td><button class="btn btn-danger remove">移除</button></td>
            </tr>            
            `
          });
          strHtml += `
            </tbody>
              <tfoot>
                  <tr>
                      <td><input type="checkbox" name="selectAll"></td>
                      <td colspan="2">商品总数：<span class="totalNum">0</span></td>
                      <td colspan="2">商品总价：<span class="totalPrice">0</span></td>
                      <td><a class="btn btn-primary" href="list.html">回列表页</a></td>
                      <td><a class="btn btn-warning" href="order.html">去结算</a></td>
                  </tr>
              </tfoot>
            </table>`
          // 拼接完渲染字符串
          $('.cart>.content').html(strHtml)
          // 渲染之后调用
          slect()
          addAndReduce()
          numBlur()
          bindRemove()
        }
        fn();
      }
    }
  }

  // 定义一个获取商品总数和商品总价的函数
  function getNumATotal() {
    let num = 0;  // 总数
    let total = 0; // 总价

    $('input[name=selectOne]').each((i, v) => {

      if ($(v).prop('checked')) {  // 判断复选框是否被选中
        num += $(v).parent().parent().find('input[name=number]').val() - 0;
        total += $(v).parent().parent().find('.subtotal>span').text() - 0;
      }
    })
    $('.totalNum').html(num);
    $('.totalPrice').html(total);
  }

  // 封装点击复选框的事件
  function slect() {
    // 全选点击
    $('input[name=selectAll]').click(function () {
      $('input[name=selectAll]').prop('checked', $(this).prop('checked'));
      $('input[name=selectOne]').prop('checked', $(this).prop('checked'));
      // 统计总数和总价
      getNumATotal();
    })
    // 单个点击
    $('input[name=selectOne]').click(function () {
      // 将获取的jq集合转为数组
      let jqArr = [...$('input[name=selectOne]')];
      console.log(jqArr);
      let flag = jqArr.every(v => v.checked);
      $('input[name=selectAll]').prop('checked', flag);
      // 统计总数和总价
      getNumATotal();



    })


  }
  // 加和减的函数
  function addAndReduce() {
    $('.add').click(function () {
      // 将禁用的 - 解除
      $(this).prev().prev().prop('disabled', false);
      let num = $(this).prev().val() - 0;
      num++;
      // 判断num不能超过库存
      let stock = $(this).parent().parent()[0].dataset.stock;
      if (num > stock) {
        num = stock;
        layer.msg('超出库存');
        $(this).prop('disabled', true);
      }
      $(this).prev().val(num);
      // 改变本地购物车的数量
      // 获取商品id
      let id = $(this).parent().parent()[0].dataset.id;
      let data = JSON.parse(localStorage.getItem('data'));
      let car = data.find(v => v.username === username && v.id === id);
      car.n = num;
      // 将改变后的data数据写入本地购物车
      localStorage.setItem('data', JSON.stringify(data));
      // 修改小结
      let total = num * $(this).parent().prev().find('span').text() - 0;
      $(this).parent().next().find('span').html(total);
      // 重新核算总价
      getNumATotal();
    })
    // 减按钮的点击事件
    $('.reduce').click(function () {
      // 将禁用的 + 解除
      $(this).next().next().prop('disabled', false);
      let num = $(this).next().val() - 0;
      num--;
      if (num < 1) {
        num = 1;
        layer.msg('购买数不能少于1');
        $(this).prop('disabled', true);
      }
      $(this).next().val(num);
      // 改变本地购物车的数量
      // 获取商品id，根据对应tr中的属性值 data-id
      let id = $(this).parent().parent()[0].dataset.id;
      let data = JSON.parse(localStorage.getItem('data'));
      let car = data.find(v => v.username === username && v.id === id);
      car.n = num;
      // 将改变后的data数据写入本地购物车
      localStorage.setItem('data', JSON.stringify(data));
      // 修改小结
      let total = num * $(this).parent().prev().find('span').text() - 0;
      $(this).parent().next().find('span').html(total);
      // 重新核算总价
      getNumATotal();
    })
  }

  // 绑定数量输入框的失去焦点事件
  function numBlur() {
    $('input[name=number]').blur(function () {
      let num = $(this).val() - 0;
      let stock = $(this).parent().parent()[0].dataset.stock - 0;
      // 对应本地购物车的数量
      // 获取商品id
      let id = $(this).parent().parent()[0].dataset.id;
      let data = JSON.parse(localStorage.getItem('data'));
      let car = data.find(v => v.username === username && v.id === id);
      if (num < 1 || num > stock) {
        layer.msg('购买数量错误');
        $(this).val(car.n);
      } else {
        car.n = num;
        // 将改变后的data数据写入本地购物车
        localStorage.setItem('data', JSON.stringify(data));
        // 修改小结
        let total = num * $(this).parent().prev().find('span').text() - 0;
        $(this).parent().next().find('span').html(total);
      }
      // 重新核算总价
      getNumATotal();
    })
  }


  // 定义一个移除按钮的点击事件
  function bindRemove() {
    $('.remove').click(function () {
      let index = layer.confirm('你真的要移除吗?', { btn: ['移除', '点错了'] }, () => {
        // 使用箭头函数 让this指向 点击的这个按钮
        // 获取这个商品的id        
        let id = $(this).parent().parent()[0].dataset.id;
        // 将本地购物车的这个数据移除
        let data = JSON.parse(localStorage.getItem('data'));


        // 获取对应用户的数据,排除掉这个要被移除的数据
        let resData = data.filter(v => !(v.username === username && v.id === id));
        // 排除和用户不相关的购物车数据，判断的到的数据是否为空
        let resdata2 = resData.filter(v => v.username === username);
        // 如果移除后的数组是个空数组，则刷新页面
        if (!resdata2.length) {
          location.reload(); 
        }
        // 将resData写入本地购物车
        localStorage.setItem('data', JSON.stringify(resData));
        // 移除对应的tr
        $(this).parent().parent().remove();
        // 关闭弹出层
        layer.close(index);
        // 移除页面中的对应的tr
      }, function () {
        layer.msg('快买吧');
        return false;
      })
    })
  }
  
})